<template>
	<view class="container">
		<view class="banner">
			<u-image src="https://cdn.uviewui.com/uview/swiper/swiper2.png" show-loading width="100%"
				height="326rpx"></u-image>
			<view class="back-box" @click="goBack"><u-icon name="arrow-left" color="#fff" size="36"></u-icon></view>
		</view>
		<view class="info">
			<view class="name u-line-1">{{goods.name}}</view>
			<view class="parameter">
				{{$t('goods.sales')}}: {{goods.sales}}
				<text style="margin-left: 24rpx;">{{$t('goods.energy')}}: {{goods.energy}}</text>
			</view>
			<view class="tags">
				<view v-for="(tag, index) in goods.tags" :key="index" class="tag">{{tag}}</view>
			</view>
			<view class="price-box">
				<view class="price">
					<text class="symbol">$</text>{{goods.price}}
				</view>
				<num-box type="text" />
			</view>
		</view>
		<view class="tab">
			<u-tabs :list="contentTabs" line-color="#033787" line-height="6" line-width="24"
				:active-style="{color: '#033787'}" @click="changeTab"></u-tabs>
		</view>
		<view class="content" :style="{height: ($u.sys().windowHeight - 359) + 'px'}">
			<view v-show="tab === 0">
				{{goods.brief}}
			</view>
		</view>
		<buy-car />
	</view>
</template>

<script>
	import buyCar from './buy-car.vue'
	import numBox from './num-box.vue'
	export default {
		components: {
			buyCar,
			numBox
		},
		data() {
			return {
				goods: {
					id: 2,
					pic: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					name: '這是午餐',
					sales: 88,
					energy: 108,
					tags: ['肥牛不错'],
					price: 10.86,
					brief: "这是一段商品详情描述、这是一段商品详情描述、这是一段	商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描一段商品详情描述、这是一段这是一段商品详情描述、这是一段商品详情描述、这是一段	商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描述、这是一段商品详情描一段商品详情描述、这是一段商品详"
				},
				tab: 0,
				contentTabs: [{
						'name': this.$t('goods.brief')
					},
					{
						'name': this.$t('goods.comment')
					},
				]
			}
		},
		onShow() {

		},
		methods: {
			changeTab(event) {
				this.tab = event.index
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.back-box {
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 48rpx;
		left: 32rpx;
		border-radius: 32rpx;
		height: 48rpx;
		width: 48rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.banner {
		height: 326rpx;
		z-index: 1;
		position: relative;
	}

	.info {
		background-color: #fff;
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 208rpx;

		.name {
			font-size: 30rpx;
			color: #0C1626;
			font-weight: 600;
		}

		.parameter {
			font-size: 22rpx;
			color: #B9BFCB;
			margin: 8rpx;
		}

		.tags {
			display: flex;

			.tag {
				font-size: 18rpx;
				border-radius: 4rpx;
				padding: 2rpx 6rpx;
				color: #fff;
				margin-right: 8rpx;
				background-color: #E35525;
			}
		}

		.price-box {
			height: 68rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.price {
				color: #E35525;
				font-size: 36rpx;

				.symbol {
					font-size: 16rpx;
				}
			}
		}
	}

	.tab {
		margin-top: 24rpx;
		background-color: #fff;
	}

	.content {
		padding: 24rpx;
		background-color: #fff;
		padding-bottom: 88px;
	}
</style>